<template>
  <ICustomSelect
    :input-id="inputId"
    :clearable="false"
    :model-value="modelValue"
    :options="$scriptConfig('date_formats')"
    @option:selected="handleChange($event)"
  >
    <template #option="option">
      {{ option.label }} [
      <span v-text="localizedDate(new Date(), option.label)" />
      ]
    </template>
  </ICustomSelect>
</template>

<script setup>
import { onMounted } from 'vue'

import { useDates } from '../composables/useDates'

const props = defineProps({
  modelValue: String,
  inputId: { type: String, default: 'date_format' },
})

const emit = defineEmits(['update:modelValue'])

const { localizedDate } = useDates()

function handleChange(value) {
  emit('update:modelValue', value)
}

onMounted(() => {
  // Emit the initial value in case it's only taken from the configuration to fill the form
  handleChange(props.modelValue)
})
</script>
